<!DOCTYPE>
<html>
<head>
    <title>私人推荐</title>
    <meta name="referrer" content="never">
    <style>

        /* 设置nav的大小 */
        .nav{

            /* 设置宽度和高度 */
            width: 1210px;
            height: 48px;
            /* 设置背景颜色 */
            background-color: #E8E7E3;

            margin:10px auto;

        }

        /* 设置nav中li */
        .nav li{
            /* 设置li向左浮动，已使菜单横向排列 */
            float: left;
            /* 设置li的高度 */
            /* height: 48px; */
            /* 将文字在父元素中垂直居中 */
            line-height: 48px;
        }

        /* 设置a的样式 */
        .nav a{
            /* 将a转换为块元素 */
            display: block;
            /* 去除下划线 */
            text-decoration: none;
            /* 设置字体颜色 */
            color: #777777;
            /* 修改字体大小 */
            font-size: 18px;

            padding: 0 39px;
        }
        /*修改最后一个快标签大小*/
        .nav li:last-child a{
            padding: 0 42px 0 41px;
        }

        /* 设置鼠标移入的效果 */
        a:hover{
            background-color: #3F3F3F;
            color: #E8E7E3;
        }
        a{text-decoration:none;
            color: #777777;
            /* 修改字体大小 */
            font-size: 18px;
            padding: 0 39px;}
        a.pic {
            padding: 30 40px;
        }
        input.cc{
            width: 400px;
            background-color: #1b111130;
            color: black;
            height: 30px;
        }
        input.c{
            width: 40px;
            background-color: #1b111130;
            color: black;
            height: 30px;
        }

    </style>
    <style>
        .list {
            display: flex;
            flex-wrap: wrap;
            padding: 0 10px;
        }
        .list item {
            flex: none;
            width: calc(50% - 20px);
            padding: 20px 20px 20px 10px;
            position: relative;
            font-size: 0;
        }
        .list .item:nth-child(n) {
            margin-right: 20px;
        }
        .item inner {
            display: flex;
        }
        .item a {
            cursor: pointer;
            color: inherit;
            text-decoration: none;
        }
        .list * {
            box-sizing: border-box;
        }
        span{
            color: #777777;
            /* 修改字体大小 */
            font-size: 12px;
            padding: 5 9px;
            display: block;
            margin:5px auto;
        }
    </style>
</head>
<body>
<h1>个性化推荐</h1>
<ul class="nav">
    <li>
        <a href="/login">您好，请先登录</a>
    </li>
    <li>
        <a href="/register">免费注册</a>
    </li>
    <li>
        <a href="/logout">退出登录</a>
    </li>
    <li>
        <a href="/">点我返回首页</a>
    </li>
    <li>
        <a href="/index/recenthot">近期热门</a>
    </li>
    <li>
        <a href="/index/goodbooks">高分图书</a>
    </li>
</ul>
<table>
    <tr>
        <td><form action="/books/searchBook">
            <input class="cc" name="findName" placeholder="搜索书名" style="width:400px" value=""/>
            <input class="c" type="submit" value="搜索"/>
        </form></td>
    </tr>
</table>
<button><a href="/user/recommender">个性化推荐</a></button>
<button><a href="/books/hot">历史热门推荐</a></button>

<table>
    <h3>猜您喜欢</h3>
    <ul class="list">
    <#list list as book>
        <li class="item" >
            <div class="inner">
                <a class="pic"  href="/books/details?bookid=${book.bookId}">
                    <img width="169" height="254" src="${book.imageUrl}">
                </a>
                <span>
                    ${book.title}
                </span>
            </div>
        </li>
    </#list>
    </ul>
</table>
</body>
</html>